<template>
  <div class="customer-management-home">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        
      </div>

      <el-table :data="businessTypes" stripe style="width: 100%">
        <el-table-column prop="业务名称" label="业务种类" width="180"/>
        <el-table-column prop="累计净增客户数" label="累计净增客户数" width="180"/>
        <el-table-column prop="当月新增客户数" label="当月新增客户数" width="180"/>
        <el-table-column prop="当月删除客户数" label="当月删除客户数" width="180"/>
      </el-table>
    </el-card>


  </div>
</template>

<script>
import axios from 'axios';
export default {
  components: {
    
  },
  data() {
    return {
      businessTypes: [
        {
          业务名称: '业务种类1',
          累计净增客户数: 100,
          当月新增客户数: 10,
          当月删除客户数: 2
        },
        ,
        // 更多业务种类数据
      ],
      fileList: []
    };
  },
  methods: {
    openAddDialog() {
      this.$refs.customerAdd.openDialog();
    },
    openEditDialog() {
      this.$refs.customerEdit.openDialog();
    },
    openDeleteDialog() {
      this.$refs.customerDelete.openDialog();
    },
    openQueryDialog() {
      this.$refs.customerQuery.openDialog();
    },
    handleUpload(response, file, fileList) {
      this.$message.success('上传成功');
      // 在此处处理上传的文件
    },
    exportAll() {
      const tHeader = ['业务种类', '累计净增客户数', '当月新增客户数', '当月删除客户数'];
      const filterVal = ['type', 'totalCustomers', 'monthlyNewCustomers', 'monthlyDeletedCustomers'];
      const list = this.businessTypes;
      const data = list.map(v => filterVal.map(j => v[j]));
      export_json_to_excel(tHeader, data, '客户资料');
    },
    // 如果需要从后端获取数据，可以在此处进行API调用
    fetchBusinessTypesData() {
      // 调用API获取业务种类数据，并更新businessTypes数组
      axios.post('/api/customer/getCustomerStatistics')
      .then(response =>{
        this.businessTypes = response.data.data;
      })
    }
  },
  mounted() {
    // 在组件挂载时调用fetchBusinessTypesData方法获取数据
    this.fetchBusinessTypesData();
  }
};
</script>

<style scoped>
.customer-management-home {
  padding: 20px;
}
</style>
